<template>
    <div>
        <div class="history col-md-10">
            <div>
                <span class="history-title">发表历史</span>
                <button class="btn btn-info" style="float: right" @click="addPost()">
                    <i class="fa fa-plus-square-o"></i>&nbsp;写一篇
                </button>
                <hr>
            </div>

            <div class="row">
                <div class="input-group mb-3 col-md-6">
                    <input type="text" v-model="keyword" class="form-control" placeholder="搜索，可按名称、作者、内容进行搜索" aria-label="Recipient's username" aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <span class="input-group-text search-icon" @click="searchPost(1)"><i class="fa fa-search"></i></span>
                    </div>
                </div>

                <div class="input-group mb-3 col-md-6">
                    <select v-model="year" id="year-select" class="form-control" >
                        <option value="0" selected>不限</option>
                        <option v-for="yearInArray in YEAR_ARRAY">{{yearInArray}}</option>
                    </select>
                    <div class="input-group-append">
                        <span class="input-group-text">年</span>
                    </div>
                    <select class="form-control" v-model="month" id="month-select">
                        <option value="0" selected>不限</option>
                        <option v-for="i in 12">{{i}}</option>
                    </select>
                    <div class="input-group-append">
                        <span class="input-group-text">月</span>
                    </div>
                    <div class="input-group-append">
                        <span class="input-group-text search-icon" @click="searchPost(1)"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>

            <div v-for="(post, i) in postList" class="content-list col-md-12">
                <div class="card text-center">
                    <div class="card-header">
                        <span style="float:left;">No.{{(i+1)}}</span>
                        <img :src="post.author.photo" style="float:right;" class="friends-photo img-fluid"/>
<!--                        <span style="float:right;">作者：{{post.author.userName}}</span>-->
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">{{post.title}}</h5>
                        <p class="card-text text-secondary">作者：{{post.author.name}}</p>
<!--                        <p class="card-text text-secondary">{{post.description}}</p>-->
                        <router-link :to="{path: '/post/detail', query: {id: post.id}}" class="btn btn-primary">查看全文</router-link>
                    </div>
                    <div class="card-footer text-muted">
                        <span v-show="post.status === 0">发表于{{post.createTime}}</span>
                        <span v-show="post.status !== 0">修改于{{post.updateTime}}</span>
                    </div>
                </div>
            </div>
        </div>
        <Pagination ref="Pagination" v-bind:list="searchPost" :size="5"></Pagination>
    </div>
</template>

<script>
    import Pagination from "../../components/Pagination";
    export default {
        name: "Post",
        components: {Pagination},
        data:function () {
            return {
                loginUser: {},
                postList: [],
                post: {},
                year: '0',
                month: '0',
                // 年份集合
                YEAR_ARRAY: YEAR_ARRAY,

                keyword: "",
            }
        },
        mounted() {
            let _this = this;
            _this.loginUser = Tool.getLoginUser();
            _this.searchPost(1);
        },
        methods:{
            /**
             * 查询列表
             */
            searchPost(page) {
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/post/search',{
                    keyword: _this.keyword,
                    year: _this.year,
                    month: _this.month,
                    page: page,
                    size: _this.$refs.Pagination.size,
                }).then(response=>{
                    let resp = response.data;
                    if (resp.success) {
                        _this.postList = resp.content.list;
                        _this.$refs.Pagination.render(page,resp.content.total);
                    }
                })
            },
            addPost() {
                let _this = this;
                if (_this.loginUser) {
                    _this.$router.push("/post/add");
                } else {
                    _this.$parent.$parent.$refs.header.openLoginModal();
                }
            },

            list(page) {
                let _this = this;

                _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/post/list', {
                    page: page,
                    size: _this.$refs.Pagination.size,
                }).then((response) => {
                    let resp = response.data;
                    _this.postList = resp.content.list;
                    _this.$refs.Pagination.render(page,resp.content.total);
                })
            },

        }
    }
</script>

<style scoped>
    .history{
    }
    .history-title{
        font-size: 23px;
        font-weight: bold;
    }
    .friends-photo{
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .content-list{
        margin-bottom: 10px;
    }
    .search-icon {
        cursor: pointer;
    }
</style>